<template>
  <div class="header-menu">
    <a-breadcrumb class="breadcrumb">
      <a-breadcrumb-item v-for="item in lists" :key="item.name">
          <router-link v-if="item.isLink" :to="{name: item.routeName}">
              {{ item.name }}
          </router-link>
          <span v-else>
              {{ item.name }}
          </span>
      </a-breadcrumb-item>
    </a-breadcrumb>
  </div>
</template>

<script>
import getBreadCrumb from '../../utils/breadcrumb';

export default {
  computed: {
    lists() {
      return getBreadCrumb(this.$route.matched);
    },
  },
};
</script>

<style scoped>
.header-menu {
  height: 48px;
  width: 100%;
  background: #ffffff;
  display: flex;
  align-items: center;
  margin-top: 1px;
}
.header-menu > .breadcrumb {
    margin-left: 32px;
}
</style>
